<%--
  Created by IntelliJ IDEA.
  User: vortex
  Date: 2020/05/04
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/oksub.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/loading/okLoading.js"></script>
<%--    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/userList.js"></script>--%>

</head>
<body>
<div class="ok-body">

    <div class="layui-row">
        <form class="layui-form layui-col-md12 ok-search">

            <select name="roleId" lay-filter="roleId">
                <option value="">请选择用户身份</option>
                <option value="1">普通用户</option>
                <option value="2">管理员</option>
            </select>
            <input class="layui-input" placeholder="账号" autocomplete="off" name="account">
            <input class="layui-input" placeholder="用户名" autocomplete="off" name="username">
            <button class="layui-btn" lay-submit lay-filter="search">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </form>
    </div>

    <table id="userTable" lay-filter="userTable"></table>
</div>

<!--js逻辑-->
<script src="${pageContext.request.contextPath}/static/lib/layui/layui.js"></script>
<script type="text/javascript">

    layui.use(["element", "jquery","okLayer","form","util","okUtils","table"],function () {

        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;
        let util = layui.util;

        okLoading.close($);

        let userTable = table.render({
            elem: '#userTable',
            url: '/user/page',
            id: 'userTable',
            page: true,
            limits:[10,20,30],
            toolbar:true,
            toolbar: '#toolbarUser',
            size: 'sm',
            parseData:function(res){
                return{
                    "code":res.code,
                    "msg": res.message,
                    "count":res.content.total,
                    "data":res.content.data
                }
            },
            response:{
                statusName:'code',
                statusCode:200
            },
            cols:[[
                {type:"checkbox",fixed:"left"},

                {field: "id", title: "ID",hide:true},
                {type: "numbers", title:'序号', fixed: "left", width:60},
                {field: "account", title: "账号", sort:true, width: 120},
                {field: "password", title: "密码", width: 120},
                {field: "username", title: "用户名", width: 130, },

                {
                    field: "roleId", title: "身份", width: 80, templet:function (d) {
                        let rep = "";
                        // console.log(d);
                        // console.log(d.roleId);
                        switch (d.roleId) {
                            case 1:
                                rep += '<span class="layui-badge layui-bg-green">用&nbsp&nbsp&nbsp&nbsp户</span>';
                                break;
                            case 2:
                                rep += '<span class="layui-badge layui-bg-red">管理员</span>';
                                break;
                        }
                        // console.log(rep);
                        return rep;
                    }
                },
                {title: "操作", width: 140, align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done:function (res, curr, count) {
                console.info(res, curr, count);
            }
        });


        table.on("toolbar(userTable)",function (obj){
            switch (obj.event) {
                case "batchDel":
                    batchDel();break;
                case "addUser":
                    addUser();break;
            }
        });

        table.on('tool(userTable)',function (obj) {
            let data = obj.data;
            $()
            switch (obj.event) {
                case 'delete':
                    deleteUser(data);break;
                case 'edit':
                    editUser(data);break;
                case 'open':
                    openUser(data);break;
            }
            
        });

        form.on('select(roleId)', function (data) {
            userTable.reload({
                where: {
                    roleId: data.value
                },
                page: {curr: 1}
            });
            return false;
        });

        form.on("submit(search)", function (data) {
            userTable.reload({
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });

        function addUser() {
            okLayer.open("添加用户", "/system/addUser", "90%", "90%", null,null);
            userTable.reload({
                page: {curr: 1}
            });
        }

        function deleteUser(data) {
            okLayer.confirm("您确定要删除该用户吗？",function (index) {
                layer.close(index);
                okUtils.ajax("/user/delete?id="+data.id,"get",null,true).done(function (rep) {

                 okUtils.tableSuccessMsg(rep.content);

                }).fail(function (rep) {
                    console.log(rep);
                });

            });
        }
        
        function editUser(data) {

            okLayer.open("修改账号信息", "/system/editUser", "90%", "90%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(data);
            }, function () {
                userTable.reload();
            })

        }

        function openUser(data) {
            okLayer.open("用户详情", "/system/openUser", "90%", "90%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(data);
            }, null)
        }

        function batchDel() {
            okLayer.confirm("确定要批量删除吗？",function (index) {
                layer.close(index);
                let ids = tableBatchCheck();
                if (ids){
                    okUtils.ajax("/user/batchDel","post",{"ids":ids},true).done(function (rep) {
                        okUtils.tableSuccessMsg(rep.content);
                    }).fail(function (rep) {
                        console.log(rep);
                    });

                }
            });
        }


        function tableBatchCheck() {
            let checkStatus = table.checkStatus("userTable");
            let rows = checkStatus.data.length;
            console.log(checkStatus.data);
            if (rows > 0) {
                let idsStr = "";
                for (let i = 0; i < checkStatus.data.length; i++) {
                    idsStr += checkStatus.data[i].id+ ",";
                }
                return idsStr;
            } else {
                layer.msg("未选择有效数据", {offset: "t", anim: 6});
            }
        }


    });
</script>

<script type="text/html" id="toolbarUser">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel" type="button">批量删除</button>
        <button class="layui-btn layui-btn-sm" id="addUserbtn" lay-event="addUser" type="button">添加用户</button>
    </div>
</script>
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="详情" lay-event="open"><i class="layui-icon">&#xe705;</i></a>
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="注销" lay-event="delete"><i class="layui-icon">&#xe640;</i></a>
</script>

<%--<script type="text/javascript">--%>
<%--    layui.use(["jquery"],function () {--%>

<%--        var $ = layui.jquery;--%>

<%--        var roleId = "<%=session.getAttribute("roleID")%>";--%>
<%--        console.log(roleId == 1);--%>
<%--        console.log($("#addUserbtn"));--%>
<%--        if (roleId == 1){--%>
<%--            $("#addUserbtn").removeClass('layui-btn layui-btn-sm');--%>
<%--            $("#addUserbtn").addClass('layui-btn layui-btn-disabled');--%>
<%--            // $("#addUserbtn").addClass('#toolbarUser layui-btn-container layui-btn layui-btn-disabled');--%>
<%--        }--%>
<%--        console.log($("#addUserbtn"));--%>


<%--    });--%>
<%--</script>--%>

<%--<script language="JavaScript">--%>
<%--    function setAttr() {--%>
<%--        var roleId = "<%=session.getAttribute("roleID")%>";--%>
<%--        console.log(roleId == 1);--%>
<%--        console.log(document.getElementById("addUserbtn"));--%>
<%--        if (roleId == 1){--%>
<%--            // document.getElementById("#addUserbtn").setAttribute("style", "display: none");--%>

<%--            if (document.getElementById("addUserbtn")){--%>
<%--                document.getElementById("addUserbtn").hide();--%>
<%--            }--%>
<%--        }--%>
<%--    }--%>
<%--    window.onload = setAttr();--%>
<%--</script>--%>

</body>
</html>


